<template>
  <div>
    <div class="position_center padding-20">
      <imgedit @callback="setimgurl" :imgUrl="imgurl ? imgurl : $nologin"></imgedit>
      <div class="sure margin-t100 bg-ff0 text-center line-height-100 text-ff" @click="sure">保存</div>
    </div>

    <van-overlay :show="overlay" @click="overlay = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-loading size="40px" vertical>图片保存中，请耐心等待...</van-loading>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import * as qiniu from "qiniu-js";
import imgedit from "../../components/imgedit";
export default {
  components: {
    imgedit
  },
  data() {
    return {
      show: false,
      imgurl: "",
      overlay: false
    };
  },
  mounted() {
    document.querySelector('html').style.backgroundColor = "#ffffff";
    this.$axios.post( "/wap/personal/card", {
      token: window.localStorage.getItem("token"),
      type: 1
    }).then(res => {
      this.imgurl = res.data.data.user.head_img;
    });
  },
  methods: {
    // 将二进制文件请求发送
    imgPost(url) {
      let param = new FormData();
      param.append("file", url);
      param.append("type", "2");
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios
        .post(
          "/common/upload/image/qiniu",
          param,
          config
        )
        .then(res => {
          this.$toast(res.data.msg);
          if (res.data.code == 0) {
            this.imgurl = res.data.url;
          }
          this.overlay = false;
        });
    },
    // 组件返回 base64 画布重新压缩
    setimgurl(e) {
      this.overlay = true;
      this.canvasDataURL(e);
    },
    base64ToFile(urlData, fileName) {
      let arr = urlData.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]); // 解码base64
      let n = bytes.length;
      let ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], fileName, { type: mime });
    },
    // 压缩图片宽400 转化二进制 请求接口
    canvasDataURL(base64) {
      var img = new Image();
      let that = this;
      img.src = base64;
      img.onload = function() {
        //默认按照比例压缩
        var scale = this.width / this.height;
        //规定压缩后的大小
        var canvasWidth = 400;
        var canvasHeight = canvasWidth / scale;
        //生成canvas
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        //创建节点属性
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        var anw = document.createAttribute("width");
        anw.nodeValue = canvasWidth;
        var anh = document.createAttribute("height");
        anh.nodeValue = canvasHeight;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(this, 0, 0, canvasWidth, canvasHeight);
        //图像质量,值越小，所绘制出的图像越模糊
        var quality = 0.1;
        var base64String = canvas.toDataURL("img/png,img/jpg,img/jpeg", quality);
        //通过base64获取二进制文件
        let img = that.base64ToFile(base64String, "header.png");
        that.imgPost(img);
      };
    },
    sure() {
      this.$axios.post( "/wap/personal/editUserInfo", {
        token: window.localStorage.getItem("token"),
        key: "head_img",
        value: this.imgurl
      }).then(res => {
        if (res.data.code == 0) {
          this.$toast(res.data.msg);
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style>
html {
  height: 100%;
  background: white;
}
</style>
<style scoped>
.imgs {
  width: 5.6rem;
  height: 5.6rem;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid #cccccc;
}
.position_center {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.position_center::before {
  content: "点击修改头像";
  position: absolute;
  top: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: #999999;
}
</style>
<style>
html {
  background: white;
}
</style>